<template>
    <div class="auth-container">
        <!-- 背景图 -->
        <div class="background"></div>

        <!-- 内容区 -->
        <div class="auth-box">
            <img src="https://typora-image-mrz.oss-cn-beijing.aliyuncs.com/OIP.jpg" class="logo" />

            <div v-if="isLogin">
                <h2 class="title">用户登录</h2>
                <el-form
                    label-width="80px"
                    :model="loginForm"
                    :rules="rules"
                    ref="loginFormRef"
                    label-position="left"
                >
                    <el-form-item label="手机号" prop="username">
                        <el-input v-model="loginForm.username" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="password">
                        <el-input
                            type="password"
                            v-model="loginForm.password"
                            placeholder="请输入验证码"
                        />
                    </el-form-item>
                    <el-form-item label-width="0">
                        <el-button type="primary" @click="handleLogin">登录</el-button>
                        <el-button type="primary" @click="sendMsg">发送验证码</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElForm, ElFormItem, ElButton, ElInput } from 'element-plus'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { userSendMessage, userLogin } from '@/api/user'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const isLogin = ref(true)

const loginForm = reactive({
    username: '',
    password: ''
})

const registerForm = reactive({
    username: '',
    password: '',
    confirmPassword: ''
})

const loginFormRef = ref()
const registerFormRef = ref()

const rules = {
    username: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
}

// 登录逻辑
const handleLogin = () => {
    loginFormRef.value.validate(valid => {
        if (valid) {
            userLogin({
                phone: loginForm.username,
                code: loginForm.password
            }).then(res => {
                if (res.code === 0) {
                    userStore.fetchUserInfo()
                    localStorage.setItem('token', res.data.id)
                    ElMessage.success('登录成功')
                    router.push('/home')
                } else {
                    ElMessage.error(res.message || '登录失败')
                }
            }).catch(error => {
                ElMessage.error(error.message || '登录失败')
            })
        }
    })
}

// 发送验证码
const sendMsg = () => {
    userSendMessage({
        phone: loginForm.username,
    }).then(res => {
        if (res.code === 0) {
            userStore.fetchUserInfo()
            localStorage.setItem('token', res.data.id)
            ElMessage.success('验证码发送成功')
        } else {
            ElMessage.error(res.message || '验证码发送失败')
        }
    }).catch(error => {
        ElMessage.error(error.message || '验证码发送失败')
    })
}
</script>

<style lang="less" scoped>
.auth-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    .background {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: url('@/assets/Login/background.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .auth-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        padding: 40px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 8px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

        .logo {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto 20px;
            display: block;
        }

        .title {
            color: #fff;
            text-align: center;
            margin-bottom: 30px;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .el-form-item {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .el-form-item .el-button {
            flex: 1;
            margin: 0 5px;
        }

        .switch-text {
            color: #fff;
            width: 100%;
            text-align: right;
            cursor: pointer;
            font-family: 'Microsoft YaHei', sans-serif;

            &:hover {
                color: #409eff;
            }
        }
    }
}

::v-deep .el-input__inner {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);

    &::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }
}

::v-deep .el-form-item__label {
    color: #fff;
}
</style>
